<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Axios CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .login-card {
                @apply bg-white rounded-2xl shadow-lg p-8 w-full max-w-md transition-all duration-300 hover:shadow-xl;
            }
            .input-field {
                @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition duration-200;
            }
            .btn-primary {
                @apply w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/50;
            }
        }
    </style>
</head>

<body>
    <h2>欢迎来到首页</h2>
    <!--<p>这是一个简单的首页</p>
    <div th:text="${user.username}"></div>
    <div th:text="${user.roles}"></div>
    <div th:if="${user.roles.contains('ROLE_ADMIN')}">
        你是管理员
    </div>
    <div th:unless="${user.roles.contains('ROLE_ADMIN')}">
        你不是管理员
    </div>
    <div th:if="${user.roles.contains('ROLE_MANAGER')}">
        你是经理
    </div>
    <div th:unless="${user.roles.contains('ROLE_MANAGER')}">
        你不是经理
    </div>
    <div th:if="${user.roles.contains('ROLE_USER')}">
        你是用户
    </div>
    <div th:unless="${user.roles.contains('ROLE_USER')}">
        你不是用户
    </div>-->

    <!-- 任务列表功能区域 -->
    <div class="mt-8 px-4" x-data="{
        tasks: [
            { id: 1, name: '完成项目文档', completed: false },
            { id: '2', name: '修复登录bug', completed: true },
            { id: 3, name: '学习Spring Boot', completed: false },
            { id: 4, name: '编写单元测试', completed: true }
        ],
        newTask: '',
        addTask() {
            if (this.newTask.trim()) {
                this.tasks.push({
                    id: Date.now(),
                    name: this.newTask,
                    completed: false
                });
                this.newTask = '';
            }
        },
        toggleTask(id) {
            const task = this.tasks.find(t => t.id === id);
            if (task) task.completed = !task.completed;
        },
        deleteTask(id) {
            this.tasks = this.tasks.filter(t => t.id !== id);
        },
        get pendingTasks() {
            return this.tasks.filter(t => !t.completed);
        },
        get completedTasks() {
            return this.tasks.filter(t => t.completed);
        }
    }">
        <h2 class="text-2xl font-bold mb-4">任务管理</h2>

        <!-- 添加任务表单 -->
        <div class="flex gap-2 mb-6">
            <input type="text"
                   x-model="newTask"
                   @keyup.enter="addTask"
                   placeholder="输入新任务..."
                   class="flex-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            <button @click="addTask"
                    class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                添加任务
            </button>
        </div>

        <!-- 左右两列任务列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 左侧：待办任务列表 -->
            <div class="bg-white p-4 rounded-lg shadow-sm">
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                    <span class="inline-block w-3 h-3 bg-yellow-500 rounded-full mr-2"></span>待办任务
                </h3>
                <div class="space-y-2">
                    <template x-for="task in pendingTasks" :key="task.id">
                        <div class="flex items-center justify-between p-3 border rounded-md">
                            <div class="flex items-center gap-3">
                                <span x-text="task.name"></span>
                            </div>
                            <div class="flex gap-2">
                                <button @click="toggleTask(task.id)"
                                        class="px-3 py-1 bg-green-100 text-green-800 rounded-md hover:bg-green-200 text-sm">
                                    同意
                                </button>
                                <button @click="deleteTask(task.id)"
                                        class="px-3 py-1 bg-yellow-100 text-red-800 rounded-md hover:bg-red-200 text-sm">
                                    驳回
                                </button>
                                <button @click="deleteTask(task.id)"
                                        class="px-3 py-1 bg-red-100 text-red-800 rounded-md hover:bg-red-200 text-sm">
                                    不批准
                                </button>
                            </div>
                        </div>
                    </template>
                    <div x-show="pendingTasks.length === 0" class="text-center text-gray-500 py-4 border rounded-md bg-gray-50">
                        没有待办任务
                    </div>
                </div>
            </div>

            <!-- 右侧：已处理任务列表 -->
            <div class="bg-white p-4 rounded-lg shadow-sm">
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                    <span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-2"></span>已处理任务
                </h3>
                <div class="space-y-2">
                    <template x-for="task in completedTasks" :key="task.id">
                        <div class="flex items-center justify-between p-3 border rounded-md bg-gray-50">
                            <div class="flex items-center gap-3">
                                <span x-text="task.name" class="text-gray-500"></span>
                            </div>
                            <div class="flex gap-2">
                                <button @click="toggleTask(task.id)"
                                        class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-md hover:bg-yellow-200 text-sm">
                                    查看
                                </button>
                            </div>
                        </div>
                    </template>
                    <div x-show="completedTasks.length === 0" class="text-center text-gray-500 py-4 border rounded-md bg-gray-50">
                        没有已处理任务
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 任务列表功能区域 -->
    <div class="mt-8 px-4" x-data="{
        tasks: [
            { id: 1, name: '完成项目文档', completed: false },
            { id: 2, name: '修复登录bug', completed: true },
            { id: 3, name: '学习Spring Boot', completed: false },
            { id: 4, name: '编写单元测试', completed: true }
        ],
        newTask: '',
        activeTab: 'pending',
        addTask() {
            if (this.newTask.trim()) {
                this.tasks.push({
                    id: Date.now(),
                    name: this.newTask,
                    completed: false
                });
                this.newTask = '';
            }
        },
        toggleTask(id) {
            const task = this.tasks.find(t => t.id === id);
            if (task) task.completed = !task.completed;
        },
        deleteTask(id) {
            this.tasks = this.tasks.filter(t => t.id !== id);
        },
        get pendingTasks() {
            return this.tasks.filter(t => !t.completed);
        },
        get completedTasks() {
            return this.tasks.filter(t => t.completed);
        }
    }">


        <!-- 任务标签页 -->
        <div class="border-b mb-4">
            <h3 class="text-xl font-semibold mb-4 flex items-center">
                <span class="inline-block w-3 h-3 bg-gray-500 rounded-full mr-2"></span>全部任务列表
            </h3>
        </div>

        <!-- 全部任务列表 -->
        <div class="space-y-2">
            <template x-for="task in completedTasks" :key="task.id">
                <div class="flex items-center justify-between p-4 border rounded-md bg-gray-50">
                    <div class="flex items-center gap-3">
                        <span x-text="task.name" class="line-through text-gray-500"></span>
                    </div>
                    <div class="flex gap-2">
                        <button @click="toggleTask(task.id)"
                                class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-md hover:bg-yellow-200">
                            查看
                        </button>
                        <button @click="deleteTask(task.id)"
                                class="px-3 py-1 bg-red-100 text-red-800 rounded-md hover:bg-red-200">
                            删除
                        </button>
                    </div>
                </div>
            </template>
            <div x-show="completedTasks.length === 0" class="text-center text-gray-500 py-4">
                没有已处理任务
            </div>
        </div>
    </div>
</body>
</html>
